<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="__CSS__/pintuer.css?v={$src_version}">
<link rel="stylesheet" href="__CSS__/admin.css?v={$src_version}">
<link rel="stylesheet" href="__CSS__/responsive.css?v={$src_version}">
<script src="__JS__/jquery-3.2.1.min.js?v={$src_version}"></script>
<script src="__JS__/pintuer.js?v={$src_version}"></script>
<script src="https://cdn.bootcss.com/jquery.nicescroll/3.7.6/jquery.nicescroll.js"></script>
<script src="__PUBLIC__/layer.js?v={$src_version}"></script>
<script src="__JS__/ming.js?v={$src_version}"></script>
<script src="__JS__/ifram_scroll.js?v={$src_version}"></script>
<script src="__JS__/plupload.full.min.js?v={$src_version}"></script>
<script src="__JS__/responsive.js?v={$src_version}"></script>   
<body>
 
<div class="panel admin-panel ">
  <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>添加/修改商品</strong></div>
  <div class="body-content"  style="min-height:900px;">
    <form method="post" class="form-x" id="frm" action="">
     
      <div class="form-group">
        <div class="label">
          <label><strong style="color:#f00;">*</strong>商品名称：</label>
        </div>
        <div class="field">
          <input type="text" value="{$edit.gname}" id="gname" class="input w50" name="gname" maxlength="100" />
          <div class="tips"></div>
        </div>
      </div>
     <div class="form-group">

        <div class="label">

          <label><strong style="color:#f00;">*</strong>商品图片：</label>

        </div>

        <div class="field">
 
           <input type="button" class="button bg-blue" id="upload_btn" value="+ 浏览上传"  style="float:left;">

          <div id="single_pic">

            <if condition="$edit['pics'] neq ''">
 
               <div class="item" id="file-{$edit.gid}">

                <input type="hidden" id="pics" name="pics" value="{$edit.pics}">

                  <img src="/{$edit.pics}" width="100px" height="100px" /> 

                  <div class="operate del" data-val="{$edit.gid}" > </div>
 
                </div>
 
            </if>

 
          </div>

   
        </div>

      </div>   
      
     <div class="form-group">
        <div class="label">
          <label>商品详情：</label>
        </div>
        <div class="field">
         <script id="gdesc" name="gdesc" type="text/plain" >{$edit.gdesc}</script> 
        </div>
      </div>
  
   <div class="form-group">
        <div class="label">
          <label><strong style="color:#f00;">*</strong>所需积分：</label>
        </div>
        <div class="field">
          <input type="text" value="{$edit.gpoint}" id="gpoint" class="input w50" name="gpoint" maxlength="11" />
          <div class="tips"></div>
        </div>
      </div>

      <div class="form-group">
        <div class="label">
          <label><strong style="color:#f00;">*</strong>商品分类：</label>
        </div>
        <div class="field">
          <select name="sort_id" id="sort_id" class="input w50">
            <volist name="sort" id="vo" key="j">
              <option value="{$vo.id}">{$vo.sort_name}</option>
            </volist>
          </select>
          <div class="tips"></div>
        </div>
      </div>
    
  
     <div class="form-group">
        <div class="label">
          <label>排序：</label>
        </div>
        <div class="field">
           <input type="text" class="input w50"   maxlength="11" <if condition="$edit['gid'] neq ''"> value="{$edit.sort}" <else /> value="{$get_sort}" </if> name="sort"   />  
           <!-- <div style="margin-top:15px;  color:#999">&nbsp;&nbsp;数字越小越靠前</div>  -->
       
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
          <input type="hidden" name="id" value="{$edit.gid}" />
          <input type="hidden" name="act" value="add" />
          <div class="button-group">
             <a class="button bg-main" href="javascript:;" id="sbt">
               <span class="icon-check-square-o"></span> 提交
             </a>  
       
             <a class="button border-main" href="javascript:history.go(-1)">
             <span class="icon-mail-reply"></span> 返回</a>
           </div> 
        </div>
      </div>
    </form>
  </div>
</div>
<!-- 配置文件 -->
    <script type="text/javascript" src="__PUBLIC__/UEditor/ueditor.config.js?v={$src_version}"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="__PUBLIC__/UEditor/ueditor.all.js?v={$src_version}"></script>
   <!-- 实例化编辑器 -->
    <script type="text/javascript">
	   UE.getEditor('gdesc',{
            //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
            toolbars:[ 
    ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'lineheight','superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc','simpleupload','insertimage','fullscreen']],
	        maximumWords:5000,
            //focus时自动清空初始化时的内容
            autoClearinitialContent:false,
            //关闭字数统计
            wordCount:true,
            //关闭elementPath
            elementPathEnabled:false,
            //默认的编辑区域高度
            initialFrameHeight:200,
			initialFrameWidth:800,
			//去掉默认保存
			enableAutoSave:false,
			//是否保持toolbar的位置不动，默认true
			autoFloatEnabled:false,
			//是否自动长高
			autoHeightEnabled:false,
            //更多其他参数，请参考ueditor.config.js中的配置项
            serverUrl :"{:U('Goods/ueditor')}"
        })
  
    </script>
<script type="text/javascript">
 
      	var uploader = new plupload.Uploader({ 

		//实例化一个plupload上传对象

		browse_button : 'upload_btn',

		url : "{:U('Goods/add')}",

		//flash_swf_url : '__JS__/Moxie.swf',

		//silverlight_xap_url : '__JS__/Moxie.xap',

		filters: {

		  mime_types : [ 

		  //只允许上传图片文件

		    { title : "图片文件", extensions : "jpg,gif,png" }

		  ],

		  prevent_duplicates: true //不允许选取重复文件

		},
 
		 multipart:false,
 
 
	});

 
	uploader.init(); //初始化
 
	//绑定文件添加进队列事件

	uploader.bind('FilesAdded',function(uploader,files){

		var pics=document.getElementsByName('pics');

	    var is_have= (typeof(pics)!='undefined'&&pics!='')&&pics.length>0?true:false;

	

		if (uploader.files.length > 1||is_have) {

		       uploader.splice(1, 1);
 
			   layer.msg('只能上传一张图片',{icon:2});
 
			   return;

          }

 

		for(var i = 0, len = files.length; i<len; i++){

			var file_name = files[i].name; //文件名

			var html='<div class="item" id="file-' + files[i].id +'">  <div class="operate del" data-val="' + files[i].id +'" > </div> </div>';

			$(html).appendTo('#single_pic');

			!function(i){

				previewImage(files[i],function(imgsrc){

		 $('#file-'+files[i].id).append('<input type=hidden id="pics" name="pics" value="' +imgsrc + '"><img src="'+ imgsrc +'" width="100px" height="100px" /> \n');

				})

		    }(i);

		}

	});

 $(function() {

      $(document).on("click",".del", function() {

		   $(this).parent(".item").remove();
           var toremove = '';
           var id = $(this).attr("data-val");
           for (var i in uploader.files) {
             if (uploader.files[i].id === id) {
                   toremove = i;
                     }

               }
               uploader.files.splice(toremove, 1);
               })
          })

	uploader.bind('StateChanged', function(uploader) {

    if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
		   var gname=$.trim($('#gname').val());
		   
		   var pics=$.trim($('#pics').val());
		   
		   var gpoint=$.trim($('#gpoint').val());
		  
		  
		   if(gname==''){
			   
			     layer.msg('请填写商品名称',{icon:2});
				 
				 $('#gname').focus();
				 
				 return false;
			   }
			   
		   if(pics==''){
			   
			     layer.msg('请上传图片',{icon:2});
				 
				 return false;
			   }
		
		   if(!is_int(gpoint)){
			   
			     layer.msg('请正确填写积分',{icon:2});
				 
				 return false;
			   }		      	   

           $('form')[0].submit();

       }

    });		

	//plupload中为我们提供了mOxie对象

	//有关mOxie的介绍和说明请看：https://github.com/moxiecode/moxie/wiki/API

	//如果你不想了解那么多的话，那就照抄本示例的代码来得到预览的图片吧

	function previewImage(file,callback){

		//file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数

		if(!file || !/image\//.test(file.type)) return; //确保文件是图片

		if(file.type=='image/gif'){

			//gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png

			var fr = new mOxie.FileReader();

			fr.onload = function(){

				callback(fr.result);

				//fr.destroy();

				fr = null;

			}

			fr.readAsDataURL(file.getSource());

		}else{

			var preloader = new mOxie.Image();

			preloader.onload = function() {

				//preloader.downsize( 300, 300 );//先压缩一下要预览的图片,宽300，高300

				var imgsrc = preloader.type=='image/jpeg' ? preloader.getAsDataURL('image/jpeg',80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据

				callback && callback(imgsrc); //callback传入的参数为预览图片的url

				preloader.destroy();

				preloader = null;

			};

			preloader.load( file.getSource() );

		}	

	}

  //最后给"开始上传"按钮注册事件

    document.getElementById('sbt').onclick = function(){

        uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法

    }




</script>


</body>
</html>